import {Provider, connect} from 'react-redux'
import store from '../../store'


// 中间件的核心原理是重写dispatch方法

function Child1() {
  console.log('child1render')
  return (
    <div>
      <WrapChild2></WrapChild2>
    </div>
  )
}



function Child2(props) {
  console.log('Child2 render')
  // console.log(props)
  return (
    <div>
      {props.number}
      <button onClick={props.add}>++</button>
      <button onClick={props.thunkAdd}>++</button>
      <button onClick={props.promiseAdd}>++</button>
    </div>
  )
}


// action 写法可以是一个函数  返回一个对象   也可以返回一个对象
// () => {}
const WrapChild2 = connect((state)=>state.counter2, {
  add: ()=> {
    return {type: 'ADD2'}
  },
  thunkAdd: () => {
    return (dispatch, getState)=>{
      setTimeout(()=>{
        dispatch({type: 'ADD2'})
      },2000)
    }
  },
  promiseAdd: () => {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve({type: 'ADD2'})
      }, 2000)
    })
  }
})(Child2)


// hooks 用法



function Comp() {
  console.log('root render')
  return (
    <Provider store={store}>
      <Child1></Child1>
    </Provider>
  )
}

export default Comp